<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="name"></use>
  </svg>
</template>

<script lang="ts">
import { computed } from 'vue'
export default {
  name: 'icon-svg',
  props: {
    iconname: {
      type: String,
      required: true,
    },
  },
  setup(props: any) {
    const name = computed(() => `${props.iconname}`)
    return {
      name,
    }
  },
}
</script>

<style scoped>
.svg-icon {
  width: 2em;
  height: 2em;
  color: linear-gradient(315deg, #cc66cc 0%, #8effd0 53%, #edcf6b 100%);
  color: #edcf6b;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
